// import IconArrowRight from '@svg/setting/icon_arrow.svg';
import { FC } from 'react';
import {
  GestureResponderEvent,
  Linking,
  Modal,
  Pressable,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Switch,
  ScrollView,
} from 'react-native';
import BottomDrawer from 'react-native-animated-bottom-drawer';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useSelector } from 'react-redux';

import FastImage from '@d11/react-native-fast-image';
import IconHeaderBack from '@svgs/icon_header_back.svg';
import IconAbout from '@svgs/setting/icon_about.svg';
import IconAgreement from '@svgs/setting/icon_agreement.svg';
import IconArrow from '@svgs/setting/icon_arrow.svg';
import IconBack from '@svgs/setting/icon_back.svg';
import IconCopy from '@svgs/setting/icon_copy.svg';
import IconDarkMode from '@svgs/setting/icon_dark_mode.svg';
import IconDelete from '@svgs/setting/icon_delete.svg';
import IconEula from '@svgs/setting/icon_eula.svg';
import IconFAQ from '@svgs/setting/icon_faq.svg';
import IconFeedback from '@svgs/setting/icon_feedback.svg';
import IconHelp from '@svgs/setting/icon_help.svg';
import IconLanguage from '@svgs/setting/icon_language.svg';
import IconLogout from '@svgs/setting/icon_logout.svg';
import IconPrivacy from '@svgs/setting/icon_privacy.svg';
import IconPro from '@svgs/setting/icon_pro.svg';
import IconRate from '@svgs/setting/icon_rate.svg';
import IconShare from '@svgs/setting/icon_share.svg';
import IconTerms from '@svgs/setting/icon_terms.svg';
import IconUser from '@svgs/setting/icon_user.svg';

import useSetting, { useAppSettings } from './hook.ts';
import HeaderBar from '@/components/headerBar/index.tsx';
import { PrivacyAgreementUrl, APP_NAME, APP_STORE_URL, COPYRIGHT_TEXT } from '@/constants';
import { RootState } from '@/stores/store.ts';
import { isShowTestURL } from '@/utils/http.ts';
import { pxToVh, pxToVw } from '@/utils/pxToVx.ts';
import { useDispatch } from 'react-redux';
import { ChangeLanguage } from '@/utils/localize/changeLanguage';
import { setVisible } from '@/stores/slice/changeLanguageSlice';
import { changeLanguage, LanguageLocale } from '@/utils/localize/i18next';
import eventEmitter from '@/utils/eventManager';
import { notificationKey } from '@/constants/index';
import { CommonActions, useNavigation } from '@react-navigation/native';

// 设置页
const Setting: FC = () => {
  const insets = useSafeAreaInsets();
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const isSubscription = useSelector((state: RootState) => state.user.subscribe);
  const memberInfo = useSelector((state: RootState) => state.user.member);
  const { isDarkMode, toggleDarkMode, currentLanguage } = useAppSettings();

  const {
    userID,
    handlePro,
    accountDrawerRef,
    handleCloseAccountDrawer,
    handleDeleteAccount,
    deleteAccountDialogVisible,
    setDeleteAccountDialogVisible,
    aboutDrawerRef,
    handleAbout,
    handleCloseAboutDrawer,
    handleCancelDeleteAccount,
    handleConfirmDeleteAccount,
    handleRecoveryPurchaseRecord,
    appVersion,
    handleCopyUserID,
    handleShare,
    handleEULA,
  } = useSetting();

  const callback = (item: LanguageLocale) => {
    console.log('item', item);
    const google_language_code = item.google_language_code;
    changeLanguage(google_language_code);

    setTimeout(() => {
      eventEmitter.emit(notificationKey.login_suceess);
    }, 200);

    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{ name: 'Tabs' }],
        // routes: [{name: 'Welcome'}],
      }),
    );
  };

  const handleLanguage = () => {
    // Language selection logic
    const data = true;
    dispatch(setVisible(data));
  };

  const handleHelp = () => {
    // Help center logic
  };

  const handleContact = () => {
    // Contact support logic
  };

  const handleFAQ = () => {
    // FAQ logic
  };

  const handlePrivacyPolicy = () => {
    // Privacy policy logic
  };

  const handleTerms = () => {
    // Terms of service logic
  };

  const handleFeedback = () => {
    // Feedback logic
  };

  const handleRateApp = () => {
    // Rate app logic - typically opens app store
    Linking.openURL(APP_STORE_URL);
  };

  const handleLogout = () => {
    // Logout logic
  };

  return (
    <View
      style={[
        styles.body_container,
        {
          paddingTop: insets.top,
          // paddingBottom: insets.bottom,
          // paddingLeft: insets.left,
          // paddingRight: insets.right,
        },
      ]}
    >
      <HeaderBar title={'Settings'} showBack={false} />
      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        <View style={styles.avatar_container}>
          <FastImage source={require('@/assets/images/profile/avatar.png')} style={styles.avatar_image} />
          <View style={styles.avatar_text_container}>
            <Text style={styles.avatar_name}>John Doe</Text>
            <Text style={styles.avatar_email}>john.doe@example.com</Text>
          </View>
        </View>

        <View style={styles.user_id_container}>
          <View style={styles.user_id_header}>
            <Text style={styles.user_id_label}>USER ID</Text>
            <TouchableOpacity
              onPress={handleCopyUserID}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
              style={styles.copy_button}
            >
              <Text style={styles.copy_text}>Copy</Text>
              <IconCopy width={14} height={14} />
            </TouchableOpacity>
          </View>
          <Text style={styles.user_id_value}>{userID || '534768991570014'}</Text>
        </View>

        <View style={styles.content_header_container}>
          <Text style={styles.content_header}>App Settings</Text>
        </View>

        <View style={styles.items_container}>
          <View style={styles.item_container}>
            <View style={styles.item_wrapper}>
              <View style={[styles.icon_background, styles.dark_mode_icon_bg]}>
                <IconDarkMode width={20} height={20} />
              </View>
              <View style={styles.item_text_container}>
                <Text style={styles.item_text}>Dark Mode</Text>
                <Text style={styles.item_subtext}>Switch app appearance</Text>
              </View>
            </View>
            <View style={styles.item_control}>
              <Text style={styles.light_text}>Light</Text>
              <Switch
                trackColor={{ false: '#E5E7EB', true: '#BFDBFE' }}
                thumbColor={isDarkMode ? '#3B82F6' : '#FFFFFF'}
                ios_backgroundColor="#E5E7EB"
                onValueChange={toggleDarkMode}
                value={isDarkMode}
                style={styles.switch}
              />
            </View>
          </View>

          <View style={styles.divider} />

          <TouchableOpacity style={styles.item_container} onPress={handleLanguage}>
            <View style={styles.item_wrapper}>
              <View style={[styles.icon_background, styles.language_icon_bg]}>
                <IconLanguage width={20} height={20} />
              </View>
              <View style={styles.item_text_container}>
                <Text style={styles.item_text}>Language</Text>
                <Text style={styles.item_subtext}>{currentLanguage}</Text>
              </View>
            </View>
            <IconArrow width={16} height={16} />
          </TouchableOpacity>
        </View>

        <View style={styles.content_header_container}>
          <Text style={styles.content_header}>Support</Text>
        </View>

        <View style={styles.items_container}>
          <TouchableOpacity style={styles.item_container} onPress={handleHelp}>
            <View style={styles.item_wrapper}>
              <View style={[styles.icon_background, styles.help_icon_bg]}>
                <IconHelp width={20} height={20} />
              </View>
              <Text style={styles.item_support_text}>Help Center</Text>
            </View>
            <IconArrow width={16} height={16} />
          </TouchableOpacity>

          <View style={styles.divider} />

          <TouchableOpacity style={styles.item_container} onPress={handleContact}>
            <View style={styles.item_wrapper}>
              <View style={[styles.icon_background, styles.contact_icon_bg]}>
                <IconAgreement width={20} height={20} />
              </View>
              <Text style={styles.item_support_text}>Contact Support</Text>
            </View>
            <IconArrow width={16} height={16} />
          </TouchableOpacity>

          <View style={styles.divider} />

          <TouchableOpacity style={styles.item_container} onPress={handleRateApp}>
            <View style={styles.item_wrapper}>
              <View style={[styles.icon_background, styles.rate_icon_bg]}>
                <IconRate width={20} height={20} />
              </View>
              <Text style={styles.item_support_text}>Rate the App</Text>
            </View>
            <IconArrow width={16} height={16} />
          </TouchableOpacity>
        </View>

        <View style={styles.content_header_container}>
          <Text style={styles.content_header}>Data</Text>
        </View>

        <View style={styles.items_container}>
          <View style={styles.delete_data_container}>
            <View style={styles.delete_data_info}>
              <View style={styles.item_wrapper}>
                <View style={[styles.icon_background, styles.delete_icon_bg]}>
                  <IconDelete width={20} height={20} />
                </View>
                <View style={styles.item_text_container}>
                  <Text style={styles.item_text}>Delete Data</Text>
                  <Text style={styles.item_subtext}>Remove all saved videos and preferences</Text>
                </View>
              </View>
              {/* <TouchableOpacity style={styles.delete_button} onPress={handleDeleteAccount}>
                <Text style={styles.delete_button_text}>Delete</Text>
              </TouchableOpacity> */}
            </View>
          </View>
        </View>

        <TouchableOpacity style={styles.logout_button} onPress={handleLogout}>
          <IconLogout style={styles.logout_icon} width={20} height={20} />
          <Text style={styles.logout_text}>Log Out</Text>
        </TouchableOpacity>

        <View style={styles.footer}>
          <Text style={styles.version_text}>
            FaceUP <Text style={styles.version_number}>v{appVersion || '1.0.0'}</Text>
          </Text>
        </View>
      </ScrollView>

      {/* Keep the existing bottom drawers and modals */}
      {/* Account Security Drawer */}
      <BottomDrawer
        ref={accountDrawerRef}
        initialHeight={pxToVh(792)}
        customStyles={{
          handle: { display: 'none' },
          container: accountSafeStyles.drawer_container_bg,
        }}
      >
        <View style={accountSafeStyles.drawer_container}>
          <View style={accountSafeStyles.header_container}>
            <Text style={accountSafeStyles.header_text}>Account Security</Text>
            <Pressable
              style={accountSafeStyles.header_back_icon_container}
              hitSlop={{ bottom: 20, left: 20, right: 20, top: 20 }}
              onPress={handleCloseAccountDrawer}
            >
              <IconHeaderBack />
            </Pressable>
          </View>
          <View style={accountSafeStyles.content_header_container}>
            <Text style={accountSafeStyles.content_header}>Account</Text>
          </View>
          <TouchableOpacity style={accountSafeStyles.drawer_item_container} onPress={handleDeleteAccount}>
            <Text style={[accountSafeStyles.drawer_item_text, accountSafeStyles.delete_account_text]}>
              Delete account
            </Text>
            <IconArrow />
          </TouchableOpacity>
        </View>
      </BottomDrawer>

      {/* About Drawer - Keep as is */}
      <BottomDrawer
        ref={aboutDrawerRef}
        initialHeight={pxToVh(792)}
        customStyles={{
          handle: { display: 'none' },
          container: aboutStyles.about_drawer_container,
        }}
      >
        <View style={aboutStyles.drawer_container}>
          <View style={aboutStyles.header_container}>
            <Text style={aboutStyles.header_text}>About</Text>
            <Pressable
              style={aboutStyles.header_back_icon_container}
              hitSlop={{ bottom: 20, left: 20, right: 20, top: 20 }}
              onPress={handleCloseAboutDrawer}
            >
              <IconHeaderBack />
            </Pressable>
          </View>
          <View style={aboutStyles.about_drawer_info_container}>
            <FastImage source={require('@assets/logo.png')} style={aboutStyles.about_drawer_logo_container} />
            <Text style={aboutStyles.about_drawer_header}>{APP_NAME}</Text>
            <Text style={aboutStyles.about_drawer_subHeader}>{appVersion}</Text>
          </View>
          <TouchableOpacity
            style={[aboutStyles.drawer_item_container, aboutStyles.phone_container]}
            onPress={() => Linking.openURL(APP_STORE_URL)}
          >
            <Text style={aboutStyles.drawer_item_text}>Rate on the App Store</Text>
            {/* <IconArrow /> */}
          </TouchableOpacity>
          <TouchableOpacity style={aboutStyles.drawer_item_container} onPress={handleRecoveryPurchaseRecord}>
            <Text style={aboutStyles.drawer_item_text}>Restore purchase history</Text>
          </TouchableOpacity>

          <View style={aboutStyles.about_company_text_container}>
            <Text style={aboutStyles.about_company_text}>All rights reserved</Text>
            <Text style={aboutStyles.about_company_text}>{COPYRIGHT_TEXT}</Text>
          </View>
        </View>
      </BottomDrawer>
      {/* 删除账号 确认框 */}
      <Modal
        style={accountSafeStyles.delete_account_dialog}
        transparent={true}
        visible={deleteAccountDialogVisible}
        onRequestClose={() => {
          setDeleteAccountDialogVisible(!deleteAccountDialogVisible);
        }}
      >
        <Pressable
          style={accountSafeStyles.dialog_container}
          onPress={() => {
            setDeleteAccountDialogVisible(!deleteAccountDialogVisible);
          }}
        >
          <View style={accountSafeStyles.dialog_content_container}>
            <View style={accountSafeStyles.dialog_content_text}>
              <Text style={accountSafeStyles.dialog_header_text}>Delete account logout?</Text>
              <Text style={accountSafeStyles.dialog_subHeader_text}>
                After deletion, account information will not be retained
              </Text>
            </View>
            <View style={accountSafeStyles.dialog_button_container}>
              <TouchableOpacity
                style={[accountSafeStyles.dialog_button_item_container, accountSafeStyles.hide_border]}
                onPress={handleCancelDeleteAccount}
              >
                <Text style={[accountSafeStyles.dialog_button_text, accountSafeStyles.dialog_button_cancel]}>
                  Cancel
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={accountSafeStyles.dialog_button_item_container}
                onPress={handleConfirmDeleteAccount}
              >
                <Text style={[accountSafeStyles.dialog_button_text, accountSafeStyles.dialog_button_action]}>
                  Action
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </Pressable>
      </Modal>
      <ChangeLanguage callback={(item) => callback(item)} />
    </View>
  );
};

const styles = StyleSheet.create({
  body_container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  scrollView: {
    flex: 1,
  },
  avatar_container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: pxToVh(24),
    marginHorizontal: pxToVw(20),
  },
  avatar_image: {
    width: pxToVw(64),
    height: pxToVw(64),
    borderRadius: pxToVw(32),
    borderWidth: 2,
    borderColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  avatar_text_container: {
    marginLeft: pxToVw(16),
  },
  avatar_name: {
    fontSize: pxToVw(20),
    fontWeight: '600',
    color: '#111827',
  },
  avatar_email: {
    fontSize: pxToVw(14),
    color: '#6B7280',
    marginTop: pxToVh(4),
  },
  user_id_container: {
    backgroundColor: '#FFFFFF',
    marginHorizontal: pxToVw(20),
    marginTop: pxToVh(24),
    borderRadius: pxToVw(16),
    padding: pxToVw(16),
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 2,
  },
  user_id_header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: pxToVh(8),
  },
  user_id_label: {
    fontSize: pxToVw(13),
    color: '#6B7280',
    fontWeight: '500',
  },
  copy_button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F3F4F6',
    paddingHorizontal: pxToVw(10),
    paddingVertical: pxToVh(4),
    borderRadius: pxToVw(12),
  },
  copy_text: {
    fontSize: pxToVw(12),
    color: '#4B5563',
    fontWeight: '500',
    marginRight: pxToVw(4),
  },
  user_id_value: {
    fontSize: pxToVw(16),
    color: '#111827',
    fontWeight: '500',
  },
  content_header_container: {
    marginHorizontal: pxToVw(20),
    marginTop: pxToVh(32),
    marginBottom: pxToVh(12),
  },
  content_header: {
    fontSize: pxToVw(16),
    color: '#4B5563',
    fontWeight: '600',
    letterSpacing: 0.5,
  },
  items_container: {
    marginHorizontal: pxToVw(20),
    backgroundColor: '#FFFFFF',
    borderRadius: pxToVw(16),
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 2,
    overflow: 'hidden',
  },
  item_container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: pxToVw(16),
    paddingVertical: pxToVh(16),
  },
  item_wrapper: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  item_text_container: {
    marginLeft: pxToVw(12),
  },
  item_support_text: {
    fontSize: pxToVw(16),
    color: '#111827',
    fontWeight: '500',
    marginLeft: pxToVw(12),
  },
  item_text: {
    fontSize: pxToVw(16),
    color: '#111827',
    fontWeight: '500',
    marginLeft: pxToVw(2),
  },
  item_subtext: {
    fontSize: pxToVw(13),
    color: '#6B7280',
    marginTop: pxToVh(2),
    paddingLeft: pxToVw(2),
  },
  item_control: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  light_text: {
    fontSize: pxToVw(14),
    color: '#6B7280',
    marginRight: pxToVw(8),
  },
  switch: {
    transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
  },
  divider: {
    height: pxToVh(1),
    backgroundColor: '#F3F4F6',
    marginHorizontal: pxToVw(16),
  },
  icon_background: {
    width: pxToVw(40),
    height: pxToVw(40),
    borderRadius: pxToVw(12),
    alignItems: 'center',
    justifyContent: 'center',
  },
  help_icon_bg: {
    backgroundColor: '#EBF5FF',
  },
  contact_icon_bg: {
    backgroundColor: '#ECFDF5',
  },
  rate_icon_bg: {
    backgroundColor: '#F5F3FF',
  },
  delete_icon_bg: {
    backgroundColor: '#FEF2F2',
  },
  delete_data_container: {
    paddingVertical: pxToVh(16),
  },
  delete_data_info: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: pxToVw(16),
  },
  delete_button_text: {
    color: '#EF4444',
    fontSize: pxToVw(15),
    fontWeight: '600',
    paddingVertical: pxToVh(8),
    paddingHorizontal: pxToVw(12),
  },
  logout_button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: pxToVw(20),
    marginTop: pxToVh(32),
    marginBottom: pxToVh(16),
    backgroundColor: '#FEF2F2',
    borderRadius: pxToVw(16),
    paddingVertical: pxToVh(16),
    shadowColor: '#EF4444',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 2,
  },
  logout_icon: {
    marginRight: pxToVw(8),
  },
  logout_text: {
    color: '#EF4444',
    fontSize: pxToVw(16),
    fontWeight: '600',
  },
  footer: {
    alignItems: 'center',
    marginTop: pxToVh(24),
    marginBottom: pxToVh(24),
  },
  version_text: {
    fontSize: pxToVw(13),
    color: '#9CA3AF',
    fontWeight: '500',
  },
  version_number: {
    fontWeight: '600',
  },
  dark_mode_icon_bg: {
    backgroundColor: '#EBF5FF',
  },
  language_icon_bg: {
    backgroundColor: '#F0FDF4',
  },
  delete_button: {
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    paddingHorizontal: pxToVw(12),
    paddingVertical: pxToVh(6),
    borderRadius: pxToVw(8),
  },
});
const accountSafeStyles = StyleSheet.create({
  drawer_container_bg: {
    backgroundColor: '#1C1C1E',
  },
  header_container: {
    width: '100%',
    height: pxToVh(44),
    justifyContent: 'center',
    alignItems: 'center',
  },
  header_text: {
    fontSize: pxToVw(17),
    height: pxToVh(22),
    lineHeight: pxToVh(22),
    fontWeight: '600',
    color: '#fff',
  },
  header_back_icon_container: {
    width: pxToVw(24),
    height: pxToVh(24),
    position: 'absolute',
    left: pxToVw(8),
    top: pxToVh(10),
  },
  content_header_container: {
    width: '100%',
    height: pxToVh(25.15),
    marginTop: pxToVh(4),
    // alignItems: "center",
    // flexDirection: "row",
  },
  content_header: {
    fontSize: pxToVw(13),
    lineHeight: pxToVh(18),
    height: pxToVh(18),
    alignSelf: 'flex-start',
    marginLeft: pxToVw(16.77),
    color: 'rgba(153, 153, 153, 1)',
  },

  drawer_container: {
    width: '100%',
    height: pxToVh(792),
    alignItems: 'center',
    backgroundColor: '#1C1C1E',
  },
  drawer_item_container: {
    width: pxToVw(369),
    height: pxToVh(54),
    borderRadius: pxToVw(12),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#2C2C2E',
    paddingHorizontal: pxToVw(16),
  },
  drawer_item_text: {
    fontSize: pxToVw(17),
    lineHeight: pxToVh(22),
    height: pxToVh(22),
  },
  delete_account_text: {
    color: 'rgba(255, 59, 48, 1)',
  },
  delete_account_dialog: {
    backgroundColor: '#8c8c8c',
  },
  dialog_container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialog_content_container: {
    backgroundColor: '#252525',
    width: pxToVw(273),
    height: pxToVh(136),
    borderRadius: pxToVw(12),
  },
  dialog_content_text: {
    width: '100%',
    flex: 1,
    alignItems: 'center',
    padding: pxToVw(16),
    borderBottomWidth: pxToVw(0.5),
    borderBottomColor: 'rgba(84, 84, 88, 0.65)',
  },
  dialog_header_text: {
    fontSize: pxToVw(17),
    lineHeight: pxToVh(22),
    fontWeight: '600',
    color: '#fff',
    textAlign: 'center',
  },
  dialog_subHeader_text: {
    width: '100%',
    fontSize: pxToVw(13),
    lineHeight: pxToVh(18),
    color: '#fff',
    textAlign: 'center',
  },
  dialog_button_container: {
    width: '100%',
    height: pxToVh(44),
    flexDirection: 'row',
  },
  dialog_button_text: {
    fontSize: pxToVw(17),
    lineHeight: pxToVh(22),
    height: pxToVh(22),
  },
  dialog_button_cancel: {
    color: '#0A84FF',
  },
  dialog_button_action: {
    color: 'rgba(255, 59, 48, 1)',
    fontWeight: '600',
  },
  dialog_button_item_container: {
    flex: 1,
    borderLeftWidth: pxToVw(0.5),
    borderLeftColor: 'rgba(84, 84, 88, 0.65)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  hide_border: {
    borderLeftWidth: 0,
  },
});

const aboutStyles = StyleSheet.create({
  about_drawer_container: {
    backgroundColor: '#1C1C1E',
  },

  header_container: {
    width: '100%',
    height: pxToVh(44),
    justifyContent: 'center',
    alignItems: 'center',
  },
  header_text: {
    fontSize: pxToVw(17),
    height: pxToVh(22),
    lineHeight: pxToVh(22),
    fontWeight: '600',
    color: '#fff',
  },
  header_back_icon_container: {
    width: pxToVw(24),
    height: pxToVh(24),
    position: 'absolute',
    left: pxToVw(8),
    top: pxToVh(10),
  },
  drawer_container: {
    width: '100%',
    height: pxToVh(792),
    alignItems: 'center',
    backgroundColor: '#1C1C1E',
  },
  drawer_item_container: {
    width: pxToVw(369),
    height: pxToVh(54),
    borderRadius: pxToVw(12),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#2C2C2E',
    paddingHorizontal: pxToVw(16),
  },
  drawer_item_text: {
    fontSize: pxToVw(17),
    lineHeight: pxToVh(22),
    height: pxToVh(22),
    color: '#fff',
  },
  phone_container: {
    marginTop: pxToVh(20.12),
    marginBottom: pxToVh(16),
  },
  about_drawer_info_container: {
    width: '100%',
    height: pxToVh(296),
    alignItems: 'center',
  },
  about_drawer_logo_container: {
    width: pxToVw(120),
    height: pxToVh(120),
    borderRadius: pxToVw(22),
    marginTop: pxToVh(34.12),
  },
  about_drawer_header: {
    fontSize: pxToVw(22),
    lineHeight: pxToVh(28),
    height: pxToVh(28),
    fontWeight: '600',
    marginTop: pxToVh(16),
    color: '#fff',
  },
  about_drawer_subHeader: {
    fontSize: pxToVw(15),
    lineHeight: pxToVh(20),
    height: pxToVh(20),
    marginTop: pxToVh(12),
    color: '#fff',
  },
  about_company_text_container: {
    width: '100%',
    marginTop: pxToVh(210),
    alignItems: 'center',
  },
  about_company_text: {
    color: 'rgba(60, 60, 67, 0.6)',
    fontSize: pxToVw(13),
    lineHeight: pxToVh(18),
  },
});
export default Setting;
